<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,user-scalable=no"
    />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.0/vconsole.min.js"></script>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        display: block;
      }
      * {
        padding: 0px;
        margin: 0px;
      }
      canvas {
        /* position: fixed;
            top: 0px;
            left: 100px; */
        /* pointer-events: none; */
        background-color: #f8f8f8;
        /* margin: 0px auto; */
        display: block;
        /* background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
                linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
            background-size: 16px 16px;
            background-position: 0 0, 8px 8px;
            background-repeat: repeat; */
        box-shadow: 0 0 10px #ccc;
      }

      img {
        display: none;
      }
    </style>
  </head>

  <body>
    <div>
      <div>
        <canvas id="canvas" width="300" height="300"></canvas>
      </div>
      <!-- <canvas id="canvas2" width="300" height="300"></canvas> -->
      <div>
        <canvas id="offScreenCanvas" style="display: none"></canvas>
      </div>
      <div>
        <canvas id="canvas2"></canvas>
      </div>
      <div>
        <canvas id="canvas3"></canvas>
      </div>
    </div>
    <!-- <img id="dog" alt="" crossorigin="anonymous" src="https://s.cn.bing.net/th?id=OJ.ctIMyEUgdeHZwQ&w=120&h=160&c=8&rs=1&pid=academic" /> -->
    <!-- <img id="dog" src="../img/op.jfif" /> -->
    <img id="dog" src="../img/testbg.png" />
    <img
      id="bg"
      src="https://szlm.51bonli.com/storage/works/202310256538dbdd64312-hd.jpg"
      crossorigin="anonymous"
    />
    <!-- <img style="display: block;width: 300px;height: auto;" src="../img/lena.jpg" /> -->
    <img id="result" />
    <button id="import">导入</button>
    <textarea id="input"></textarea>
    <button id="export">导出</button>
    <button id="addSize">字体增大</button>
    <input type="file" id="file" />
  </body>
  <script>
     new VConsole()
  </script>
</html>
